<template>
  <div class="prompt-bag  cenCen">
    <div style="maxWidth:600px" class="prompt-box ">
      <div class="prompt-title">
        {{title}}
      </div>
      <div class="prompt-con">
        <p>请先验证手机号码</p>
      </div>
      <div class="prompt-input cenCen">
        <div class="prompt-input-tit cenCen">+{{areaCode}}
          <co-select v-model.trim="areaCode" title="电话国家码" search-placeholder="请输入" type="popup" :data="selectList" placeholder="请输入" class="prompt-co-select" />
        </div>
        <input v-model.trim="verifiPhoneNum" maxlength="11" placeholder="请输入手机号">
      </div>
      <div class="prompt-input cenCen">
        <input v-model.trim="verifiCodeStr" maxlength="6" placeholder="请输入验证码">
        <div @click="getAuthCode()" class="prompt-input-verifiCodeStr cenCen">{{authCodeTime>=60?'获取验证码':`${authCodeTime}s`}}</div>
      </div>
      <div class="prompt-btn-box">
        <div @click="closeshowGetCode" class="prompt-btn cenCen">
          取消
        </div>
        <div @click="submitFrom()" :style="[{'color':$store.state.themeColor}]" class="prompt-btn cenCen prompt-btn-sure">
          确认
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import areaCodeList from "./areaCode.js";
export default {
  props: {
    authCodeTime: {
      type: Number
    },
    title: {
      type: String,
      default: () => ""
    }
  },
  data() {
    return {
      selectList: [], //选项
      areaCode: "86", //区域号
      verifiPhoneNum: "", //手机号
      verifiCodeStr: "" //验证码
    };
  },
  mounted() {
    // 初始化区号
    this.selectList = [];
    for (let i = 0; i < areaCodeList.length; i++) {
      let obj = {
        label: `${areaCodeList[i].name}(${areaCodeList[i].tel})`,
        value: areaCodeList[i].tel
      };
      this.selectList.push(obj);
    }
  },
  methods: {
    // 关闭弹框
    closeshowGetCode() {
      this.$emit("closeshowGetCode");
    },
    // 获取验证码
    getAuthCode() {
      this.$emit("getAuthCode");
    },
    // 确提交
    submitFrom() {
      if (!this.verifiPhoneNum) {
        this.$toast("请输入手机号");
        return;
      }
      if (!this.verifiCodeStr) {
        this.$toast("请输入验证码");
        return;
      }
      this.closeshowGetCode();
      this.$emit("submitFrom");
    }
  }
};
</script>

<style scoped>
.prompt-bag {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.prompt-box {
  width: 80%;
  height: auto;
  min-height: 200px;
  background: #e0e0e0;
  border-radius: 14px;
  padding: 16px 30px 146px 30px;
  position: relative;
}
.prompt-title {
  width: 100%;
  height: auto;
  font-size: 28px;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  margin: 20px 0px;
}
.prompt-con {
  width: 100%;
  height: auto;
  text-align: center;
  margin: 10px 0px 36px 0px;
}
.prompt-con > p {
  font-size: 22px;
  color: #373d41;
  letter-spacing: 0;
  text-align: center;
  margin: 3px 0px;
}
.prompt-input {
  width: 100%;
  height: 74px;
  line-height: 74px;
  background: #ffffff;
  border-radius: 2px;
  position: relative;
  margin-top: 16px;
}
.prompt-input-verifiCodeStr {
  position: absolute;
  top: 10%;
  right: 16px;
  width: auto;
  height: 80%;
  border: 1px solid rgba(0, 0, 80, 0.9);
  font-size: 22px;
  padding: 0px 16px;
  color: #373d41;
  cursor: pointer;
}
.prompt-input-tit {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 90px;
  height: 100%;
  font-size: 22px;
  color: #373d41;
  padding: 0px 8px;
  cursor: pointer;
}
.prompt-co-select {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 90px;
  height: 100%;
  cursor: pointer !important;
}
.co-input::after {
  border: none !important;
  height: 0px !important;
}
.prompt-input > input {
  width: 100%;
  height: 100%;
  text-align: left;
  font-size: 22px;
  color: #373d41;
  padding: 0px 16px 0px 96px;
}
.prompt-btn-box {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 88px;
  cursor: pointer;
  border-top: 1px solid rgba(0, 0, 80, 0.9);
}
.prompt-btn {
  width: 50%;
  height: 100%;
  float: left;
  font-size: 28px;
  color: #373d41;
}
.prompt-btn-sure {
  border-left: 1px solid rgba(0, 0, 80, 0.9);
}
</style>